import React from "react";
import axios from '../../../util/http';
import * as url from '../../../util/api'
import { Select, DatePicker, Input, Button, Table, Dropdown, Menu, Switch } from 'antd';
import { Link } from 'react-router-dom'
import './NotificationAnnouncement.css'
import { DownOutlined, UserOutlined } from '@ant-design/icons';
const { Search } = Input;
const { RangePicker } = DatePicker;
const { Option } = Select;
export default class NotificationAnnouncement extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [
        // {
        //   key: '1',
        //   title:"员工请假制度通知",
        //   type:"公司制度",
        //   object:"已读（2）",
        //   time:"2020-05-02"
        // }
      ],
      checked:''
    };
    this.menu = (
      <Menu onClick={this.handleMenuClick}>
        <Menu.Item key="1" icon={<UserOutlined />}>
          详情
        </Menu.Item>
        <Menu.Item key="2" icon={<UserOutlined />}>
          删除
        </Menu.Item>
        {/* <Menu.Item key="3" icon={<UserOutlined />}>
          删除
        </Menu.Item> */}
      </Menu>
    );
    this.columns = [
      {
        title: '标题',
        dataIndex: 'title',
      },
      {
        title: '通知分类',
        dataIndex: 'noticeType',
      },
      {
        title: '文字轮播',
        dataIndex: 'word',
        render: () =>
          <div>
            <Switch defaultChecked onChange={this.onChangeSwitch} />
          </div>
      },
      {
        title: '发送对象',
        dataIndex: 'content',
      },
      {
        title: '发布时间',
        dataIndex: 'release_Time',
      },
      {
        title: '',
        dataIndex: '',
        render: () =>
          <Dropdown overlay={this.menu}>
            <Button>
              其他操作<DownOutlined />
            </Button>
          </Dropdown>
      }
    ];
  }
  handleMenuClick=()=>{
    axios({
      url: url.announcementDelete,
      method: 'post',
      data: {
        noticeId: "1"     //公告id
      }
      }).then(res => {
        console.log(res)
      })
  }
  onChangeSwitch=(checked)=> {
    console.log(checked);
    // if(){}else if(){}
    axios({
          url: url.announcementUpdate,
          method: 'post',
          data: {
            carousel: 0,     //轮播状态
            noticeId: "1"    //公告id
          }
          }).then(res => {
            console.log(res)
          })
  }
  handleChangeOne=(value)=> {
    console.log(`selected ${value}`);
    axios({
      url:url.selectNoticeByCondition,
      method:'post',
      data:{
        currentPage: 1,    //页码
        perSize: 1,      //页容量
        selectValue: "123"     //查询条件 value
      }
    }).then(res=>{
      console.log(res)
      let data = res.data.data.filter((item) => {
        item.key = item.noticeId
        delete item.noticeId
        return item
      })
      this.setState({
        data:data
      })
    })
  }
  handleChangeTwo=(value)=> {
    console.log(`selected ${value}`);
    axios({
      url:url.selectNoticeByCondition,
      method:'post',
      data:{
        currentPage: 1,    //页码
        perSize: 1,      //页容量
        selectValue: "123"     //查询条件 value
      }
    }).then(res=>{
      console.log(res)
      let data = res.data.data.filter((item) => {
        item.key = item.noticeId
        delete item.noticeId
        return item
      })
      this.setState({
        data:data
      })
    })
  }
  onChange(pagination, filters, sorter, extra) {
    console.log('params', pagination, filters, sorter, extra);
  }
  Search=()=>{
    axios({
      url:url.selectNoticeByCondition,
      method:'post',
      data:{
        currentPage: 1,    //页码
        perSize: 1,      //页容量
        selectValue: "123"     //查询条件
      }
    }).then(res=>{
      console.log(res)
      let data = res.data.data.filter((item) => {
        item.key = item.noticeId
        delete item.noticeId
        return item
      })
      this.setState({
        data:data
      })
    })
  }
  render() {
    return (
      <div>
        <div className={'tongzhiTop'}>
          <div className={'tongzhiTopLeft'}>
            <div>
              <Select defaultValue="全部类别" style={{ width: 100 }} onChange={this.handleChangeOne}>
                <Option value="全部类别">全部类别</Option>
                <Option value="营销物料">营销物料</Option>
                <Option value="政策发文">政策发文</Option>
                <Option value="最新通知">最新通知</Option>
                <Option value="公司制度">公司制度</Option>
              </Select>
            </div>
            <div>
              <Select defaultValue="文字轮播" style={{ width: 100 }} onChange={this.handleChangeTwo}>
                <Option value="文字轮播">文字轮播</Option>
                <Option value="是">是</Option>
                <Option value="否">否</Option>
              </Select>
            </div>
            <div>
              <RangePicker />
            </div>
            <div>
              <Search
                placeholder="input search text"
                onSearch={value => console.log(value)}
                style={{ width: 200 }}
                onChange={this.Search}
              />
            </div>
          </div>
          <div className={'tongzhiTopRight'}>
            <Link to="/homepage/noticeNew">
              <Button className={'button'} style={{ backgroundColor: '#4BD0B6', border: '#4BD0B6' }} type="primary">新增</Button>
            </Link>
          </div>
        </div>
        <div className={'tongzhiTable'}>
          <Table columns={this.columns} dataSource={this.state.data} onChange={this.onChange} />
        </div>

      </div>
    );
  }
componentDidMount() {
    axios({
      url: url.selectByPage,
      method: 'post',
      data: {
        currentPage: 1,    //页码
        perSize: 1     //页容量
      }
    }).then(res => {
      console.log(res)
      let data = res.data.data.filter((item) => {
        item.key = item.noticeId
        delete item.noticeId
        if(item.carousel==0){
          this.state.checked=false
        }
        console.log(this.state.checked)
        return item
      })
      this.setState({
        data:data
      })
    })
  }
}

